<template>
  <div class="ai-assistant-layout">
    <!-- 左侧栏 -->
    <aside class="ai-sidebar" :class="{ collapsed: sidebarCollapsed }">
      <div class="sidebar-header">
        <h2 v-if="!sidebarCollapsed" class="sidebar-title">历史记录</h2>
      </div>
      <div class="sidebar-content" v-if="!sidebarCollapsed">
        <el-button class="new-chat-btn" type="primary" size="small" @click="startNewChat" block>
          <el-icon><Plus /></el-icon>新对话
        </el-button>
        <div class="chat-history-list">
          <div v-for="chat in aiChatStore.chatHistory" :key="chat.id" class="chat-history-item" :class="{ active: aiChatStore.currentChatId === chat.id }" @click="handleChatItemClick(chat.id)">
            <div class="chat-title" @dblclick.stop="openEditDialog(chat.id, chat.title)">{{ chat.title }}</div>
            <div class="chat-meta">
              <span class="chat-time">{{ formatTime(chat.updatedAt) }}</span>
              <el-button text size="small" class="edit-btn" @click.stop="openEditDialog(chat.id, chat.title)"><el-icon><Edit /></el-icon></el-button>
              <el-button text size="small" class="delete-btn" @click.stop="confirmDeleteChat(chat.id, chat.title)"><el-icon><Delete /></el-icon></el-button>
            </div>
          </div>
          <div v-if="aiChatStore.chatHistory.length === 0" class="empty-history">
            <el-icon class="empty-icon"><ChatDotRound /></el-icon>
            <p>暂无历史会话</p>
          </div>
        </div>
      </div>
    </aside>
    <!-- 主内容区 -->
    <main class="ai-main-content">
      <div class="ai-header">
        <!-- <div class="ai-logo"><el-icon><ChatDotRound /></el-icon></div> -->
        <div class="ai-title-group">
          <h1>Class-Topia AI 学习助手</h1>
        </div>
      </div>
      <div class="ai-messages-area">
        <div v-if="aiChatStore.currentMessages.length === 0" class="ai-welcome">
          <div class="features-showcase">
            <div class="feature-item">
              <el-icon><Document /></el-icon>
              <span>智能学习计划</span>
            </div>
            <div class="feature-item">
              <el-icon><TrendCharts /></el-icon>
              <span>课程与资源推荐</span>
            </div>
            <div class="feature-item">
              <el-icon><ChatDotRound /></el-icon>
              <span>高效学习方法</span>
            </div>
          </div>
          <div class="quick-start">
            <h3>试试这些功能</h3>
            <div class="quick-actions">
              <el-button @click="sendStudyPlan" size="small" class="quick-action-btn">
                <el-icon><Document /></el-icon>日程安排
              </el-button>
              <el-button @click="sendCoursePlan" size="small" class="quick-action-btn">
                <el-icon><TrendCharts /></el-icon>学习计划
              </el-button>
              <el-button @click="sendLearningResources" size="small" class="quick-action-btn">
                <el-icon><Search /></el-icon>学习资源
              </el-button>
              <el-button @click="sendLearningMethods" size="small" class="quick-action-btn">
                <el-icon><ChatDotRound /></el-icon>学习方法
              </el-button>
            </div>
          </div>
        </div>
        <div v-else class="messages-list">
          <div v-for="(message, index) in aiChatStore.currentMessages" :key="index" class="message-item" :class="{ 'user-message': message.role === 'user', 'ai-message': message.role === 'assistant' }">
            <div class="message-avatar">
              <el-avatar v-if="message.role === 'user'" :size="32" :src="message.avatar || userStore.user?.avatar"></el-avatar>
              <div v-else class="ai-avatar">
                <svg class="ai-avatar-svg" viewBox="0 0 1024 1024" width="56" height="56" style="display: flex; align-items: center; justify-content: center;" xmlns="http://www.w3.org/2000/svg">
                  <defs>
                    <linearGradient id="ai-avatar-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                      <stop offset="0%" stop-color="#6a8dff" />
                      <stop offset="100%" stop-color="#a66cff" />
                    </linearGradient>
                  </defs>
                  <path d="M501.824 32C303.552 32 141.504 176.992 141.504 357.76c0 23.712 2.816 47.104 8.32 69.856l-51.008 114.208a32 32 0 0 0 24.704 44.736c54.272 7.744 76.672 31.168 76.672 77.312v111.552a64 64 0 0 0 64 64h20.704a64 64 0 0 1 64 64V960a32 32 0 0 0 32 32h345.6a32 32 0 0 0 0-64h-313.6v-24.608a128 128 0 0 0-128-128h-20.736v-111.552c0-65.664-32.192-110.688-91.2-131.136l39.872-89.28a31.968 31.968 0 0 0 1.568-21.792 233.088 233.088 0 0 1-8.896-63.904c0-143.712 131.936-261.76 296.32-261.76s296.32 118.016 296.32 261.76a32 32 0 0 0 64 0C862.144 176.992 700.064 32 501.824 32zM904 448a32 32 0 0 0-32 32v360a32 32 0 0 0 64 0V480a32 32 0 0 0-32-32z" fill="url(#ai-avatar-gradient)"></path>
                  <path d="M673.888 466.656c-11.744-25.568-48.416-24.64-58.816 1.536l-132.8 333.76a32 32 0 0 0 59.488 23.68l32.608-81.92c0.576 0.032 1.088 0.32 1.664 0.32h154.848l38.176 83.104a31.968 31.968 0 1 0 58.144-26.72l-153.312-333.76zM599.68 680l47.264-118.72 54.528 118.72H599.68z" fill="url(#ai-avatar-gradient)"></path>
                </svg>
              </div>
            </div>
            <div class="message-content">
              <div class="message-header">
                <span class="message-username">{{ message.role === 'user' ? (message.username || userStore.user?.nickname) : 'AI 助手' }}</span>
              </div>
              <div class="message-bubble" :class="message.role === 'user' ? 'user-bubble' : 'ai-bubble'">
                <template v-if="message.role === 'assistant'">
                  <MarkdownPreview :markdown="message.content" />
                </template>
                <template v-else>
                  {{ message.content }}
                </template>
              </div>
            </div>
          </div>
          <!-- AI 正在思考的气泡 -->
          <div v-if="aiChatStore.isStreaming" class="message-item ai-message">
            <div class="message-avatar">
              <div class="ai-avatar">
                <svg class="ai-avatar-svg" viewBox="0 0 1024 1024" width="56" height="56" style="display: flex; align-items: center; justify-content: center;" xmlns="http://www.w3.org/2000/svg">
                  <defs>
                    <linearGradient id="ai-avatar-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                      <stop offset="0%" stop-color="#6a8dff" />
                      <stop offset="100%" stop-color="#a66cff" />
                    </linearGradient>
                  </defs>
                  <path d="M501.824 32C303.552 32 141.504 176.992 141.504 357.76c0 23.712 2.816 47.104 8.32 69.856l-51.008 114.208a32 32 0 0 0 24.704 44.736c54.272 7.744 76.672 31.168 76.672 77.312v111.552a64 64 0 0 0 64 64h20.704a64 64 0 0 1 64 64V960a32 32 0 0 0 32 32h345.6a32 32 0 0 0 0-64h-313.6v-24.608a128 128 0 0 0-128-128h-20.736v-111.552c0-65.664-32.192-110.688-91.2-131.136l39.872-89.28a31.968 31.968 0 0 0 1.568-21.792 233.088 233.088 0 0 1-8.896-63.904c0-143.712 131.936-261.76 296.32-261.76s296.32 118.016 296.32 261.76a32 32 0 0 0 64 0C862.144 176.992 700.064 32 501.824 32zM904 448a32 32 0 0 0-32 32v360a32 32 0 0 0 64 0V480a32 32 0 0 0-32-32z" fill="url(#ai-avatar-gradient)"></path>
                  <path d="M673.888 466.656c-11.744-25.568-48.416-24.64-58.816 1.536l-132.8 333.76a32 32 0 0 0 59.488 23.68l32.608-81.92c0.576 0.032 1.088 0.32 1.664 0.32h154.848l38.176 83.104a31.968 31.968 0 1 0 58.144-26.72l-153.312-333.76zM599.68 680l47.264-118.72 54.528 118.72H599.68z" fill="url(#ai-avatar-gradient)"></path>
                </svg>
              </div>
            </div>
            <div class="message-content">
              <div class="message-header">
                <span class="message-username">AI 助手</span>
              </div>
              <div class="message-bubble ai-bubble" style="display:flex;align-items:center;gap:8px;">
                <el-icon class="is-loading" style="font-size:18px;"><Loading /></el-icon>
                <span>正在思考…</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ai-input-area">
        <el-input
          v-model="userInput"
          :disabled="aiChatStore.isStreaming"
          :placeholder="aiChatStore.isStreaming ? 'AI 正在思考...' : '请输入你的问题... '"
          type="textarea"
          :rows="4"
          resize="none"
          @keydown.native="handleKeyDown"
          @focus="onInputFocus"
          @blur="onInputBlur"
        />
        <el-button type="primary" :disabled="!canSend" @click="sendMessage" class="send-btn">
          <el-icon><Promotion /></el-icon>
        </el-button>
      </div>
    </main>
    <!-- 编辑会话标题弹窗 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑会话标题"
      width="450px"
      :before-close="handleEditDialogClose"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      center
    >
      <el-form @submit.prevent="confirmEditTitle">
        <el-form-item label="会话标题" label-width="80px">
          <el-input
            v-model="editDialogTitle"
            placeholder="请输入会话标题"
            maxlength="50"
            show-word-limit
            ref="editDialogInputRef"
            @keyup.enter="confirmEditTitle"
            @keyup.escape="cancelEditTitle"
            clearable
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelEditTitle" size="large">取消</el-button>
          <el-button 
            type="primary" 
            @click="confirmEditTitle"
            :disabled="!editDialogTitle.trim()"
            :loading="isEditingTitle"
            size="large"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Plus,
  ChatDotRound,
  Search,
  Document,
  TrendCharts,
  Right,
  ArrowLeft,
  Loading,
  Promotion,
  Edit,
  Delete
} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import NavBar from '@/components/NavBar.vue'
import { useAiChatStore } from '@/stores/aiChat'
import MarkdownPreview from '@/components/MarkdownPreview.vue'
import {aiGenerateCourse, aiGenerateSchedule} from '@/api/ai'

const userStore = useUserStore()
const aiChatStore = useAiChatStore()

const userInput = ref('')
const streamingChatId = ref<string | null>(null)
const messagesContainer = ref()
const inputFocused = ref(false)
const sidebarCollapsed = ref(false)
const quickActions = ref([
  { text: '学习计划', prompt: '帮我制定一个学期的学习计划', icon: Document },
  { text: '课程推荐', prompt: '推荐一些适合我专业的课程', icon: TrendCharts },
  { text: '学习资源', prompt: '推荐一些高质量的学习资源', icon: Search },
  { text: '学习方法', prompt: '分享一些高效的学习方法', icon: ChatDotRound }
])
const canSend = computed(() => {
  return userInput.value.trim() && !aiChatStore.isStreaming && userInput.value.length <= 200
})
const editDialogVisible = ref(false)
const editDialogTitle = ref('')
const editDialogChatId = ref<string | null>(null)
const isEditingTitle = ref(false)
const editDialogInputRef = ref()

const startNewChat = async () => {
  if (aiChatStore.isStreaming || aiChatStore.isLoadingHistory) {
    ElMessage.warning('正在处理中，请稍后再试')
    return
  }
  try {
    await aiChatStore.startNewChat()
    userInput.value = ''
    await scrollToBottom()
    ElMessage.success('新对话已创建')
  } catch (error: any) {
    ElMessage.error('创建新会话失败：' + (error.message || '未知错误'))
  }
}

const loadChat = async (chatId: string) => {
  if (aiChatStore.currentChatId === chatId || aiChatStore.isLoadingChat) return
  if (aiChatStore.isStreaming) {
    aiChatStore.isStreaming = false
    streamingChatId.value = null
  }
  try {
    await aiChatStore.loadChat(chatId)
    await scrollToBottom()
  } catch (error: any) {
    ElMessage.error('加载聊天记录失败')
  }
}

const sendExampleQuestion = (prompt: string) => {
  userInput.value = prompt
  sendMessage()
}

//只在界面上显示信息，并可选触发AI思考气泡
const addLocalMessage = (content: string, role: 'user' | 'assistant' = 'user', showThinking = true) => {
  aiChatStore.currentMessages.push({
    id: Date.now().toString(),
    role,
    content,
    timestamp: new Date().toISOString(),
    username: role === 'user' ? userStore.user?.nickname : undefined,
    avatar: role === 'user' ? userStore.user?.avatar : undefined
  })
  if (showThinking) {
    aiChatStore.isStreaming = true
  }
}

const sendStudyPlan = async () => {
  //sendExampleQuestion('告诉我我今天的行程安排')
  // 调用AI生成日程安排接口
  try {
    addLocalMessage('能告诉我今天的行程安排吗?')
    const today = new Date().toISOString().slice(0, 10)
    const userId = userStore.id
    const sessionId = aiChatStore.currentChatId
    if (!userId) return
    const res = await aiGenerateSchedule({
      date: today,
      userId: Number(userId),
      sessionId
    })
    
    aiChatStore.isStreaming = false
    console.log('AI生成日程安排结果:', res)
    // 你可以在这里处理返回结果，比如弹窗、消息提示等
    aiChatStore.loadChat(sessionId) // 重新加载当前会话
  } catch (e) {
    console.error('AI生成日程安排失败', e)
  }
}

const sendCoursePlan = async () => {
  try{
    addLocalMessage('能告诉我这个学期的课程学习计划吗?')
    const userId = userStore.id
    const sessionId = aiChatStore.currentChatId
    if (!userId) return
    const res = await aiGenerateCourse({
      userId: Number(userId),
      sessionId
    })
    console.log('AI生成学期课程学习计划结果:', res)
    aiChatStore.isStreaming = false
    aiChatStore.loadChat(sessionId)
  } catch (e) {
    console.error('AI生成课程学习计划失败' , e)
  }
}
const sendCourseRecommendation = () => {
  sendExampleQuestion('推荐一些适合我专业的课程')
}
const sendLearningResources = () => {
  sendExampleQuestion('推荐一些高质量的学习资源')
}
const sendLearningMethods = () => {
  sendExampleQuestion('分享一些高效的学习方法')
}
const sendMessage = async () => {
  if (!userInput.value.trim()) {
    ElMessage.warning('请输入消息内容')
    return
  }
  
  if (aiChatStore.isStreaming) {
    ElMessage.warning('正在发送消息中，请稍后')
    return
  }
  
  const messageContent = userInput.value.trim()
  
  try {
    // 如果没有当前会话，先创建一个
    if (!aiChatStore.currentChatId) {
      console.log('没有当前会话，先创建新会话')
      await startNewChat() // 直接调用 startNewChat，不依赖返回值
      
      // 再次检查会话是否创建成功
      if (!aiChatStore.currentChatId) {
        console.error('创建会话失败：currentChatId仍为空')
        throw new Error('创建会话失败，请重试')
      }
      
      console.log('新会话创建成功，会话ID:', aiChatStore.currentChatId)
    }
    
    // 先清空输入框并滚动到底部，改善用户体验
    const prompt = userInput.value
    userInput.value = ''
    await scrollToBottom()

    console.log('开始发送消息:', prompt, '到会话:', aiChatStore.currentChatId)
    
    await aiChatStore.sendMessage(prompt)
    
    // 成功接收到回复后再次滚动
    await scrollToBottom()
    
    console.log('消息发送成功')
  } catch (error: any) {
    console.error('发送消息失败:', error)
    ElMessage.error('发送消息失败：' + (error.message || '未知错误'))
  }
}
const handleKeyDown = (event: KeyboardEvent) => {
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault()
    if (canSend.value) {
      sendMessage()
    }
  }
}
const scrollToBottom = async () => {
  await nextTick()
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}
const onInputFocus = () => {
  inputFocused.value = true
}
const onInputBlur = () => {
  inputFocused.value = false
}
const formatTime = (timestamp: string) => {
  return new Date(timestamp).toLocaleString()
}
const confirmDeleteChat = async (chatId: string, title: string) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除会话"${title}"吗？此操作不可撤销。`,
      '删除会话',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
        confirmButtonClass: 'el-button--danger'
      }
    )
    await aiChatStore.removeChatSession(chatId)
    userInput.value = ''
    ElMessage.success('会话已删除')
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error('删除会话失败')
    }
  }
}
const handleChatItemClick = (chatId: string) => {
  if (aiChatStore.isLoadingChat) return
  loadChat(chatId)
}
const openEditDialog = (chatId: string, title: string) => {
  editDialogChatId.value = chatId
  editDialogTitle.value = title
  editDialogVisible.value = true
  nextTick(() => {
    if (editDialogInputRef.value) {
      editDialogInputRef.value.focus()
      editDialogInputRef.value.select()
    }
  })
}
const handleEditDialogClose = () => {
  if (isEditingTitle.value) return false
  cancelEditTitle()
  return true
}
const confirmEditTitle = async () => {
  if (!editDialogChatId.value || !editDialogTitle.value.trim() || isEditingTitle.value) return
  try {
    isEditingTitle.value = true
    await aiChatStore.editSessionTitle(editDialogChatId.value, editDialogTitle.value.trim())
    ElMessage.success('会话标题已更新')
    editDialogVisible.value = false
    resetEditDialog()
  } catch (error: any) {
    ElMessage.error('更新会话标题失败')
  } finally {
    isEditingTitle.value = false
  }
}
const cancelEditTitle = () => {
  if (isEditingTitle.value) return
  editDialogVisible.value = false
  resetEditDialog()
}
const resetEditDialog = () => {
  editDialogChatId.value = null
  editDialogTitle.value = ''
  isEditingTitle.value = false
}
onMounted(() => {
  if (userStore.id) {
    aiChatStore.loadChatHistory()
  } else {
    // 监听 userStore.id，等有值再加载
    const stop = watch(
      () => userStore.id,
      (val) => {
        if (val) {
          aiChatStore.loadChatHistory()
          stop() // 只监听一次
        }
      },
      { immediate: true }
    )
  }
})
</script>

<style scoped>
.ai-assistant-layout {
  margin-top: 24px;
  margin-bottom: 5px;
  min-height: calc(100vh - 128px);
  height: 86vh; /* 新增：限制整体高度，防止内容溢出 */
  display: flex;
  background: var(--ct-bg-gradient, #f8fafc);
  border-radius: 5px;
  width: 1000px;
}
.ai-sidebar {
  width: 300px;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  transition: width 0.2s;
  flex-basis: 25%;
  max-width: 25%;
  min-width: 72px;
  z-index: 2;
  border-radius: 5px 0 0 5px;
  height: 100%; /* 新增：侧边栏高度填满父容器 */
}
.ai-sidebar.collapsed {
  width: 72px;
}
.sidebar-header {
  display: flex;
  align-items: center;
  height: 55px; /* 调小高度，更加紧凑 */
  padding: 0 16px;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}
.sidebar-title {
  font-size: 20px;
  font-weight: 700;
  color: #223;
  flex: 1;
}
.sidebar-content {
  flex: 1;
  padding: 16px 8px 0 8px;
  overflow-y: auto;
  min-height: 0; /* 新增：防止flex子项溢出，保证滚动生效 */
}
.new-chat-btn {
  width: 100%;
  height: 36px; /* 高度加高 */
  line-height: 36px; /* 垂直居中 */
  font-size: 14px; /* 字体加大 */
  margin-bottom: 16px;
  background: linear-gradient(90deg, #6a8dff 0%, #a66cff 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px 0 rgba(106, 141, 255, 0.08);
  transition: background 0.2s, box-shadow 0.2s;
}
.new-chat-btn:hover {
  background: linear-gradient(90deg, #7eaaff 0%, #b48cff 100%) !important;
  box-shadow: 0 4px 16px 0 rgba(106, 141, 255, 0.15);
}
.new-chat-btn:disabled {
  background: linear-gradient(90deg, #b3cfff 0%, #d1cfff 100%) !important;
  color: #fff !important;
  opacity: 0.7;
  box-shadow: none;
}
.chat-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-history-item {
  background: #f7f8fa;
  border-radius: 5px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: background 0.2s;
  border: 1px solid transparent;
}
.chat-history-item.active {
  background: #e6f0ff;
  border-color: #409eff;
}
.chat-title {
  font-size: 15px;
  font-weight: 500;
  color: #223;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.chat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #888;
}
.edit-btn, .delete-btn {
  padding: 0 2px;
}
.edit-btn .el-icon,
.delete-btn .el-icon {
  font-size: 16px;
}
.empty-history {
  text-align: center;
  color: #bbb;
  margin-top: 32px;
}
.empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.ai-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%; /* 新增：主内容区高度填满父容器 */
}


.ai-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px 8px 32px; /* 减少高度 */
  justify-content: center;
  border-bottom: 1px solid #e5e7eb; /* 增加下边界分隔线 */
  border-radius: 5px 5px 0 0;
}
.ai-logo .el-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  font-size: 56px;
  background: #e6f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-title-group {
  text-align: center;
}
.ai-title-group h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  color: #223;
}
.ai-title-group p {
  font-size: 16px;
  color: #666;
  margin: 4px 0 0 0;
}
.ai-messages-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 32px;
  overflow-y: auto;
  min-height: 0; /* 新增：防止flex子项溢出，保证滚动生效 */
}
.ai-welcome {
  margin-top: 48px;
  text-align: center;
}
.features-showcase {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 32px;
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #409eff;
}
.feature-item .el-icon {
  font-size: 24px;
}
.quick-start {
  margin-top: 24px;
}
.quick-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}
.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}
.quick-action-btn .el-icon {
  font-size: 24px;
}
.messages-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.message-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.message-item.user-message {
  flex-direction: row-reverse;
}
.message-content {
  max-width: calc(100% - 44px); /* 限制内容宽度 */
  display: flex;
  flex-direction: column;
}
.message-item.user-message .message-content {
  align-items: flex-end;
}
.message-header {
  margin-bottom: 4px;
  font-size: 13px;
  color: #666;
  text-align: left; /* 保证用户名居左 */
}
.message-bubble {
  padding: 12px 18px;
  border-radius: 5px;
  font-size: 15px;
  line-height: 1.7;
  max-width: 600px;
  word-break: break-all;
}
.user-bubble {
  background: #fff;
  color: #223;
  border: 1px solid #e5e7eb;
  border-radius: 5px 5px 5px 0;
}
.ai-bubble {
  background: #e6f0ff;
  color: #223;
  border: 1px solid #b3d8ff;
}
.ai-input-area {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 32px 32px 43px 32px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 5px 5px;
}
.ai-input-area .el-textarea__inner {
  min-height: 80px;
  font-size: 15px;
}
.send-btn {
  height: 54px;
  min-width: 54px;
  font-size: 20px;
  background: linear-gradient(90deg, #6a8dff 0%, #a66cff 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px 0 rgba(106, 141, 255, 0.08);
  transition: background 0.2s, box-shadow 0.2s;
}
.send-btn:hover {
  background: linear-gradient(90deg, #7eaaff 0%, #b48cff 100%) !important;
  box-shadow: 0 4px 16px 0 rgba(106, 141, 255, 0.15);
}
.send-btn:disabled,
.send-btn.is-disabled {
  background: linear-gradient(90deg, #b3cfff 0%, #d1cfff 100%) !important;
  color: #fff !important;
  opacity: 0.7;
  box-shadow: none;
}
.ai-avatar-svg {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
